<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '/@/store/modules/user'
import { ElMessage } from 'element-plus'
import WechatQRModal from './WechatQRModal.vue'

const userStore = useUserStore()

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close'])

const activeTab = ref('login')
const rememberMe = ref(false)
const loginForm = ref({
  username: '',
  password: ''
})
const registerForm = ref({
  username: '',
  email: '',
  password: ''
})

// 添加微信二维码模态框的显示状态
const showWechatQR = ref(false)

// 处理登录提交
const handleLoginSubmit = async () => {
  if (!loginForm.value.username || !loginForm.value.password) {
    ElMessage.warning('请输入用户名和密码')
    return
  }

  console.log('执行登录请求')
  const success = await userStore.login(
    loginForm.value.username,
    loginForm.value.password
  )

  if (success) {
    ElMessage.success('登录成功')
    emit('close')
  }
}

// 处理注册提交
const handleRegisterSubmit = async () => {
  if (!registerForm.value.username || !registerForm.value.password || !registerForm.value.email) {
    ElMessage.warning('请填写完整注册信息')
    return
  }

  console.log('执行注册请求')
  try {
    // 调用注册API
    // const success = await userStore.register(registerForm.value)
    
    // 注册成功后自动登录
    const loginSuccess = await userStore.login(
      registerForm.value.username,
      registerForm.value.password
    )

    if (loginSuccess) {
      ElMessage.success('注册成功并已登录')
      emit('close')
    }
  } catch (error) {
    console.error('注册失败:', error)
    ElMessage.error('注册失败，请重试')
  }
}

// 修改微信登录处理函数，添加来源参数
const handleWechatLogin = (source: 'login' | 'register') => {
  showWechatQR.value = true
  // 可以传递给二维码组件，用于区分是登录还是注册
  // 这里可以根据 source 来调用不同的二维码生成接口
}

const handleSubmit = () => {
  if (activeTab.value === 'login') {
    handleLoginSubmit()
  } else {
    handleRegisterSubmit()
  }
}
</script>

<template>
  <div v-if="isOpen" class="modal-overlay" @click="emit('close')">
    <div class="modal-container" @click.stop>
      <h1 class="modal-title">欢迎登陆飞镖🎯网</h1>
      
      <!-- 标签切换 -->
      <div class="tab-container">
        <button 
          :class="['tab-btn', { active: activeTab === 'login' }]"
          @click="activeTab = 'login'"
        >
          登陆
        </button>
        <button 
          :class="['tab-btn', { active: activeTab === 'register' }]"
          @click="activeTab = 'register'"
        >
          注册
        </button>
      </div>

      <!-- 登录表单 -->
      <form v-if="activeTab === 'login'" @submit.prevent="handleLoginSubmit" class="form">
        <div class="form-group">
          <label>用户名</label>
          <input 
            type="text" 
            v-model="loginForm.username"
            placeholder="Username or email"
          />
        </div>
        
        <div class="form-group">
          <label>密码</label>
          <input 
            type="password" 
            v-model="loginForm.password"
            placeholder="Password"
          />
        </div>

        <div class="form-options">
          <label class="remember-me">
            <input type="checkbox" v-model="rememberMe" />
            <span>记住我</span>
          </label>
          <a href="#" class="forgot-password">忘记密码?</a>
        </div>

        <button type="submit" class="submit-btn">登陆</button>

        <!-- 登录的社交选项 -->
        <div class="social-login">
          <div class="divider">
            <span>或</span>
          </div>
          <button 
            type="button" 
            class="wechat-btn"
            @click="handleWechatLogin('login')"
          >
            <i class="fa fa-weixin"></i>
            微信登录
          </button>
        </div>
      </form>

      <!-- 注册表单 -->
      <form v-else @submit.prevent="handleRegisterSubmit" class="form">
        <div class="form-group">
          <label>用户名</label>
          <input 
            type="text" 
            v-model="registerForm.username"
            placeholder="Username or email"
          />
        </div>

        <div class="form-group">
          <label>邮箱</label>
          <input 
            type="email" 
            v-model="registerForm.email"
            placeholder="Username or email"
          />
        </div>
        
        <div class="form-group">
          <label>密码</label>
          <input 
            type="password" 
            v-model="registerForm.password"
            placeholder="Password"
          />
          <p class="password-hint">
            密码长度至少应为八个字符。为了使密码更强
            使用大小写字母、数字和符号（如！" ? $ % ^ & )
          </p>
        </div>

        <button type="submit" class="submit-btn">注册</button>

        <!-- 添加注册的社交选项 -->
        <div class="social-login">
          <div class="divider">
            <span>或</span>
          </div>
          <button 
            type="button" 
            class="wechat-btn"
            @click="handleWechatLogin('register')"
          >
            <i class="fa fa-weixin"></i>
            微信快速注册
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 修改微信二维码模态框 -->
  <WechatQRModal 
    :is-open="showWechatQR"
    @close="showWechatQR = false"
  />
</template>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-title {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 24px;
}

.tab-container {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.tab-btn {
  flex: 1;
  padding: 12px;
  border: none;
  background: none;
  color: #666;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}

.tab-btn.active {
  color: #333;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #ff5757;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.form-group input {
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus {
  border-color: #ff5757;
}

.password-hint {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  line-height: 1.5;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.forgot-password {
  font-size: 14px;
  color: #666;
  text-decoration: none;
}

.forgot-password:hover {
  color: #ff5757;
}

.submit-btn {
  background-color: #ff5757;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-btn:hover {
  background-color: #ff4242;
}

/* 调整社交登录按钮样式 */
.social-login {
  margin-top: 12px;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 12px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e0e0e0;
}

.divider span {
  padding: 0 10px;
  color: #666;
  font-size: 14px;
  background: white;
}

.wechat-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid #07c160;
  border-radius: 4px;
  background-color: white;
  color: #07c160;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.wechat-btn:hover {
  background-color: #f0f9f0;
}

.wechat-btn i {
  font-size: 20px;
}

@media (max-width: 768px) {
  .wechat-btn {
    font-size: 14px;
  }
  
  .wechat-btn i {
    font-size: 18px;
  }
}
</style> 